import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import React, {
  useState,
  useEffect,
  useImperativeHandle,
  forwardRef,
} from 'react';
import '@wangeditor/editor/dist/css/style.css';

const toolbarConfig = {
  // toolbarKeys: [
  //   // 菜单 key
  //   'headerSelect',
  //   // 分割线
  //   '|',
  //   // 菜单 key
  //   'bold',
  //   'italic',
  //   // 菜单组，包含多个菜单
  //   {
  //     key: 'group-more-style', // 必填，要以 group 开头
  //     title: '更多样式', // 必填
  //     iconSvg: '<svg>....</svg>', // 可选
  //     menuKeys: ['through', 'code', 'clearStyle'], // 下级菜单 key ，必填
  //   },
  //   // 继续配置其他菜单...
  // ],
  excludeKeys: [
    'uploadVideo',
    'insertVideo',
    'group-video',
    'insertTable',
    'divider',
    'codeBlock',
  ],
};

const MyEditor = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    getHtmlContent,
  }));

  const { showTool } = props;
  const [editor, setEditor] = useState(null); // 存储 editor 实例
  const [html, setHtml] = useState();
  const editorConfig = {
    placeholder: '请输入内容...',
    readOnly: props.readOnly ? props.readOnly : false, // 只读
    MENU_CONF: {
      uploadImage: {
        base64LimitSize: 10 * 1021 * 1024,
      },
    },
  };
  // 模拟 ajax 请求，异步设置 html
  useEffect(() => {
    if (!props?.content) return;
    setTimeout(() => {
      setHtml(props?.content);
    }, 10);
  }, [props?.content]);

  function getHtmlContent() {
    return html;
  }
  function customCheckImageFn(src, alt, url) {
    // JS 语法
    if (!src) {
      return;
    }
    if (src.indexOf('http') !== 0) {
      return '图片网址必须以 http/https 开头';
    }
    return true;

    // 返回值有三种选择：
    // 1. 返回 true ，说明检查通过，编辑器将正常插入图片
    // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）
    // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
  }

  function customParseImageSrc(src) {
    // JS 语法
    if (src.indexOf('http') !== 0) {
      return `http://${src}`;
    }
    return src;
  }

  // // 插入图片
  // editorConfig.MENU_CONF['insertImage'] = {
  //   onInsertedImage(imageNode) {
  //     // JS 语法
  //     if (imageNode == null) return;
  //     const { src, alt, url, href } = imageNode;
  //     console.log('inserted image', src, alt, url, href);
  //   },
  //   // checkImage: customCheckImageFn, // 也支持 async 函数
  //   // parseImageSrc: customParseImageSrc, // 也支持 async 函数
  // };
  // // 编辑图片
  // editorConfig.MENU_CONF['editImage'] = {
  //   onUpdatedImage(imageNode) {
  //     // JS 语法
  //     if (imageNode == null) return;

  //     const { src, alt, url } = imageNode;
  //     console.log('updated image', src, alt, url);
  //   },
  //   checkImage: customCheckImageFn, // 也支持 async 函数
  //   parseImageSrc: customParseImageSrc, // 也支持 async 函数
  // };
  // editorConfig.MENU_CONF['uploadImage'] = {
  //   // 其他配置...

  //   // 小于该值就插入 base64 格式（而不上传），默认为 0
  //   base64LimitSize: 5 * 1024 * 1024, // 5kb
  // };
  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);
  if (props?.onChange) {
    props.onChange(html);
  }
  return (
    <>
      <div style={{ border: '1px solid #ccc', zIndex: 100, marginTop: '15px' }}>
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{
            borderBottom: '1px solid #ccc',
            display: showTool ? '' : 'none',
          }}
        />
        <Editor
          defaultConfig={editorConfig}
          value={html}
          onCreated={setEditor}
          onChange={(editor) => setHtml(editor.getHtml())}
          mode="default"
          style={{ height: props?.editorHeight || '500px' }}
        />
      </div>
    </>
  );
});

export default MyEditor;
